class Scenes {
    constructor(el) {
        this.el = el
        this.createPokerStacks()
        this.incompleteStackElements = findAll(this.el, '.incomplete')
        this.completedStackElements = findAll(this.el, '.completed')
        this.randomStackElement = find(this.el, '.random')
        this.randomOpenStackElement = find(this.el, '.random-open')
        this.createPokers()
        this.pokersElements = findAll(this.el, '.poker')
        this.tableElement = find(this.el, '.solitaire-table')
    }

    stacksTemplate() {
        let html = `
            <div class="solitaire-table clearfix">
                <div class="poker-stack-line clearfix">
                    <div class="poker-stack random"></div>
                    <div class="poker-stack random-open"></div>
                    <div class="completed-stack-wrapper clearfix">
                        <div class="poker-stack completed"></div>
                        <div class="poker-stack completed"></div>
                        <div class="poker-stack completed"></div>
                        <div class="poker-stack completed"></div>
                    </div>
                </div>
                <div class="poker-stack-line clearfix">
                    <div class="poker-stack incomplete"></div>
                    <div class="poker-stack incomplete"></div>
                    <div class="poker-stack incomplete"></div>
                    <div class="poker-stack incomplete"></div>
                    <div class="poker-stack incomplete"></div>
                    <div class="poker-stack incomplete"></div>
                    <div class="poker-stack incomplete"></div>
                </div>
                <div class="operation-wrapper">
                    <div class='button' id="id-div-restart">新游戏</div>
                    <div class='button' id="id-div-tips">提示</div>
                </div>
                <div id="id-div-you-win">YOU WIN</div>
<!--                <img id="id-img-you-win" src="image/youwin.png">-->
                <div id="id-div-bgm" ></div>
                <audio src="music/夜曲-肖邦.mp3" id="#id-audio-bgm "></audio>
            </div>
        `
        return html
    }
    createPokerStacks() {
        let html = this.stacksTemplate()
        // log('this.el', this.el)
        appendHtml(this.el, html)
    }
    createPokers() {
        let img = `<img data-src = '' src="image/card_back_bg.png" alt="" class="poker" draggable="false">`
        for (let i = 0; i < 52; i++) {
            appendHtml(this.randomStackElement, img)
        }
    }
}
